<template>
  <div >
    <el-dialog :title="title" :visible="show" @opened="resetForm" @close="closeDialog" width="600px">
      <el-form ref="editFormRef" label-position="right" label-width="80px" :model="formData"  :inline="inline">
        <el-form-item v-for="(attr,index) in formAttr"
                      :key="index"
                      :label="showLabel?attr.label:''"
                      :prop="attr.field"
                      :rules="attr.rules"
        >

          <!-- 输入框组件     -->
          <el-input v-if="attr.type==='input'"
              clearable autocomplete="off"
              :placeholder="'请输入' + attr.label"
              v-model="formData[attr.field]"
              :disabled="attr.disabled ? attr.disabled : false"
          ></el-input>

          <!-- 密码框组件     -->
          <el-input v-if="attr.type==='password'"
                    show-password autocomplete="off"
                    :placeholder="'请输入' + attr.label"
                    v-model="formData[attr.field]"
                    :disabled="attr.disabled ? attr.disabled : false"
          ></el-input>

          <!-- 开关组件     -->
          <el-switch v-if="attr.type === 'switch'"
              v-model="formData[attr.field]"
              :disabled="attr.disabled ? attr.disabled : false"
          ></el-switch>

          <!-- 日期组件     -->
          <el-date-picker v-if="attr.type === 'date'"
              type="date"
              :value-format="valueFormat"
              placeholder="选择日期"
              v-model="formData[attr.field]"
              :disabled="attr.disabled ? attr.disabled : false"
          />

          <!-- 下拉组件     -->
          <el-select v-if="attr.type === 'select'"
              :placeholder="'请选择'+attr.label"
                     :disabled="attr.disabled ? attr.disabled : false"
              v-model="formData[attr.field]">
            <el-option v-for="child in attr.children"
                :key="child.value"
                :label="child.label"
                :value="child.value"
            ></el-option>
          </el-select>

          <el-radio-group v-if="attr.type === 'radio'"
                          :disabled="attr.disabled ? attr.disabled : false"
              v-model="formData[attr.field]">
            <el-radio v-for="child in attr.children"
                      :key="child.value"
                      :label="child.value"
            >{{ child.label }}</el-radio>
          </el-radio-group>

          <el-alert v-if="attr.alert"
                    :title="attr.alert"
                    :closable="false"
                    type="info"
                    style="line-height: 12px;"
          ></el-alert>

        </el-form-item>

        <!-- 插槽 -->
        <el-form-item><slot></slot></el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm">重置</el-button>
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import props from "./props";
import methods from "./methods"

export default {
  name: "CommonForm",
  props: props,
  data() {
    return {
      formData: {}
    }
  },
  methods: methods
}
</script>

<style scoped>

</style>